<template>
  <div class="interface-edit">
    <div>
      <!--基本信息<-->
      <div>
        <h3 class="interface-title-1">基本信息</h3>
        <el-form ref="form" label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item required label="编号">
                <el-input :disabled="true" v-model.trim="interfaceForm.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item required label="名称">
                <el-input placeholder="请输入接口名称" v-model.trim="interfaceForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item required label="分组">
                <el-select placeholder="请选择接口分组" v-model="interfaceForm.apiGroupId" filterable>
                  <el-option v-for="item in interfaceGroup.list" :key="item.id" :label="item.label" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item required label="版本号">
                <el-input placeholder="请输入接口版本号" v-model.trim="interfaceForm.version"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item required label="状态">
                <el-select placeholder="请选择状态" v-model="interfaceForm.status">
                  <el-option label="未完成" :value=0></el-option>
                  <el-option label="已完成" :value=1></el-option>
                  <el-option label="关闭" :value=2></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item required label="添加人员">
                <el-input placeholder="请输入添加人员" v-model="interfaceForm.author"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item required label="协议">
                <el-select placeholder="请选择协议" v-model="interfaceForm.protocol">
                  <el-option label="https" value="https"></el-option>
                  <el-option label="http" value="http"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="接口路径" required class="interface-manager-path" label-width="100px">
                <el-input placeholder="请输入接口路径" class="input-with-select" v-model.trim="interfaceForm.path">
                  <el-select slot="prepend" placeholder="请选择" v-model="interfaceForm.method">
                    <el-option label="GET" value="GET"></el-option>
                    <el-option label="POST" value="POST"></el-option>
                    <el-option label="PUT" value="PUT"></el-option>
                    <el-option label="DELETE" value="DELETE"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="接口描述">
                <el-input type="textarea" maxlength="300" placeholder="请输入业务描述" v-model.trim="interfaceForm.description"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--request设置<-->
      <div>
        <h3 class="interface-title-1" style="margin-top: 15epx">Request 设置</h3>
        <!--选择类型-->
        <div style="display: block;text-align: right;padding-bottom:5px;padding-right:3px">
          <el-radio-group v-model="interfaceForm.requestType">
            <el-radio label='form'>form</el-radio>
            <el-radio label='json'>json</el-radio>
            <el-radio label='file'>file</el-radio>
            <el-radio label='row'>row</el-radio>
          </el-radio-group>
        </div>

        <!-- 参数提交-->
        <div class="interface-tabs">
          <el-tabs type="border-card" class="interface-edit interface-tab-in">
            <el-tab-pane label="请求参数">
              <div class="interface-edit-tabs">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="addNewParams()">添加</el-button>
                <el-row v-for="(item,index1) in interfaceForm.params" :key="index1">
                  <el-col :span="5">
                    <el-input placeholder="参数名" v-model.trim="item.name"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-select placeholder="是否必填" v-model="item.must">
                      <el-option label="必填" :value=true></el-option>
                      <el-option label="非必填" :value=false></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-input placeholder="参数值" v-model.trim="item.value"></el-input>
                  </el-col>
                  <el-col :span="7">
                    <el-input placeholder="参数描述" v-model.trim="item.remark"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-button type="primary" style="margin-top: 2px" size="mini" icon="el-icon-plus" circle @click="addNewParams()"></el-button>
                    <el-button type="danger" style="margin-top: 2px" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.params.splice(index1, 1)"></el-button>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>

            <el-tab-pane label="请求Header">
              <div class="interface-edit-tabs">
                <div>
                  <el-button type="primary" size="mini" icon="el-icon-plus" @click="addNewHeader()">添加</el-button>
                </div>
                <el-row v-for="(item,index2) in interfaceForm.headers" :key="index2">
                  <el-col :span="7">
                    <el-input placeholder="标签" v-model.trim="item.name"></el-input>
                  </el-col>
                  <el-col :span="7">
                    <el-input placeholder="内容" v-model.trim="item.value"></el-input>
                  </el-col>
                  <el-col :span="7">
                    <el-input placeholder="参数描述" v-model.trim="item.remark"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewHeader()"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.headers.splice(index2, 1)"></el-button>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="请求Cookie">
              <div class="interface-edit-tabs">
                <div>
                  <el-button type="primary" size="mini" icon="el-icon-plus" @click="addNewCookies()">添加</el-button>
                </div>
                <el-row v-for="(item,index3) in interfaceForm.cookies" :key="index3">
                  <el-col :span="7">
                    <el-input placeholder="标签" v-model.trim="item.name"></el-input>
                  </el-col>
                  <el-col :span="7">
                    <el-input placeholder="内容" v-model.trim="item.value"></el-input>
                  </el-col>
                  <el-col :span="7">
                    <el-input placeholder="参数描述" v-model.trim="item.remark"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewCookies()"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.cookies.splice(index3, 1)"></el-button>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!--response设置<-->
      <div>
        <h3 class="interface-title-1">Response 设置</h3>
        <div class="interface-tabs">
          <el-tabs type="border-card">
            <el-tab-pane label="成功示例">
              <div class="interface-response">
                <vue-json-editor v-model="resultJson.successJson" lang="zh" :mode="'code'" @json-change="onJsonChange" @json-save="onJsonSave" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!--提交按钮-->
      <div style="text-align: center;margin-top: 30px;position: fixed;bottom:0;width:60%;padding-bottom: 15px">
        <el-row>
          <!-- <el-button :loading="loadingButton.addButton" type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addInterfaceInfo()">添加</el-button> -->
          <el-button :loading="loadingButton.editButton" type="primary" icon="el-icon-document-checked" size="small" @click="saveInterfaceInfo(interfaceForm)">保存</el-button>
          <router-link :to="{  name:'接口管理'}">
            <el-button type="warning" icon="el-icon-back" size="small">返回</el-button>
          </router-link>
        </el-row>
      </div>

    </div>

  </div>
</template>


<script>
import { updateApi } from '@/api/api'
import vueJsonEditor from "vue-json-editor";
import { isNull, isEmpty } from "@/utils/baseUtil";
export default {
  data () {
    return {

      //接口信息
      interfaceForm: {},

      //分组列表
      interfaceGroup: {
        list: [],
      },

      resultJson: {
        successJson: {}
      },

      loadingButton: {
        editButton: false
      }

    }

  },

  methods: {

    //添加单个参数
    addNewParams () {
      if (this.interfaceForm.params == null || this.interfaceForm.params.length == 0) {
        this.interfaceForm.params = [];
      }
      this.interfaceForm.params.push({
        name: "",
        must: false,
        remark: "",
        value: ""
      });
    },

    //添加单个header
    addNewHeader () {
      if (this.interfaceForm.headers == null || this.interfaceForm.headers.length == 0) {
        this.interfaceForm.headers = [];
      }
      this.interfaceForm.headers.push({
        name: "",
        value: "",
        remark: ""
      });
    },

    //添加单个cookie
    addNewCookies () {
      if (this.interfaceForm.cookies == null || this.interfaceForm.cookies.length == 0) {
        this.interfaceForm.cookies = [];
      }
      this.interfaceForm.cookies.push({
        name: "",
        value: "",
        remark: ""
      });
    },

    //保存接口信息
    saveInterfaceInfo (data) {
      console.log(data)
      if (this.interfaceForm.author == "" || this.interfaceForm.author == undefined) {
        this.$message({
          message: "添加人员不能为空！",
          type: "error"
        });
        return;
      }
      if (this.interfaceForm.protocol == "" || this.interfaceForm.protocol == undefined) {
        this.$message({
          message: "请求协议不能为空！",
          type: "error"
        });
        return;
      }
      if (this.interfaceForm.version == "" || this.interfaceForm.version == undefined) {
        this.$message({
          message: "接口版本不能为空！",
          type: "error"
        });
        return;
      }
      this.loadingButton.editButton = true;
      let interfaces = JSON.parse(JSON.stringify(this.interfaceForm));

      interfaces.requestType = 'form'

      interfaces.jsonParams = {}

      interfaces.commonParams = isEmpty(interfaces.commonParams) ? "" : JSON.stringify(interfaces.commonParams);
      interfaces.params = isEmpty(interfaces.params) ? "" : JSON.stringify(interfaces.params);
      interfaces.headers = isEmpty(interfaces.headers) ? "" : JSON.stringify(interfaces.headers);
      interfaces.cookies = isEmpty(interfaces.cookies) ? "" : JSON.stringify(interfaces.headers);

      interfaces.response = isEmpty(this.resultJson.successJson) ? "" : JSON.stringify(this.resultJson.successJson);
      updateApi(interfaces).then(resp => {
        console.log(resp)
        if (resp.code == 200) {
          this.loadingButton.editButton = false
          this.$message({
            message: resp.message,
            type: 'success',
          });
          this.$emit("getInterfaceInfo", '', '', this.interfaceForm.id, 1, 30);
        }
      }).catch(error => {
        this.loadingButton.editButton = false
      });
    },

    //同步接口信息
    updateInterfaceInfo (interfaceForm) {

      this.interfaceForm = interfaceForm;
      this.resultJson.successJson = isEmpty(this.interfaceForm.response) ? {} : JSON.parse(this.interfaceForm.response);
      console.log(this.resultJson.successJson)
      console.log("interfaceEdit:" + interfaceForm)

    },


    onJsonSave () {

    },

    onJsonChange () {

    }


  },

  components: {
    vueJsonEditor
  },


  mounted () {
    this.interfaceGroup.list = this.$store.state.apiGroup
    this.interfaceForm = this.$store.state.interfaceInfo;
  }
}
</script>


<style scoped>
.interface-show .interface-title-1 {
  clear: both;
  font-weight: 400;
  margin-top: 0.4rem;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
}

.interface-edit >>> .el-select {
  display: block;
}

.interface-edit >>> .el-input__inner {
  height: 34px;
}

.interface-edit >>> .el-table th {
  padding: 5px 0;
}

.interface-edit >>> .el-table__row td {
  padding: 2px 0;
}

.interface-response >>> .ace_editor {
  min-height: 400px;
}

.interface-edit >>> .el-select {
  display: block;
}

.interface-edit >>> .ace_editor {
  min-height: 250px;
}
.interface-response >>> .ace_editor {
  min-height: 400px;
}

.interface-edit >>> .el-input__inner {
  height: 33px;
}

.interface-edit >>> .el-form-item {
  margin-right: 20px;
  margin-bottom: 8px;
}

.interface-edit >>> .el-select {
  display: block;
}

.interface-edit .interface-manager-path >>> .el-select .el-input {
  width: 100px;
}

.interface-edit .interface-manager-path {
  margin-top: 2px;
}

.interface-edit .interface-edit-tabs >>> .el-col {
  padding-right: 6px;
}

.interface-edit .interface-edit-tabs >>> .el-button--mini.is-circle {
  margin-top: 4px;
}

.interface-edit .interface-edit-tabs >>> .el-row {
  padding-bottom: 6px;
}

.interface-edit .interface-edit-tabs >>> .el-input__inner {
  height: 32px;
}

.interface-edit .interface-tab {
  border: 1px solid rgb(220, 223, 230);
  border-radius: 4px;
  background: rgb(247 247 247 / 67%);
}

.interface-edit .interface-tab-in {
  /* margin-left: 10px; */
  min-height: 200px;
}

.interface-tab-in >>> .el-button--mini {
  margin-bottom: 5px;
}

.interface-tab-in >>> .el-tabs__header {
  margin: 0 0 5px;
}
</style>